$item_size: 52px;

@import 'mixin';
@import 'special';

.toolbar{
    position: fixed;
    width: 52px;
    bottom: 0;
    left: 300px;
	background-color: #fff;
}

.toolbar_box{
	margin: 0;
	padding: 0;
	list-style: none;
}

.toolbar_item,.toolbar_content,.toolbar_icon,.toolbar_text{
	width: $item_size;
	height: $item_size;
}

.toolbar_icon,.toolbar_text{
	display: block;
	position: absolute;
	left: 0;
	color: #fff;
	text-align: center;
	transition: top .5s linear;
}

.toolbar_item{
    position: relative;
    margin-bottom: 2px;

	& .toolbar_content{
		position: absolute;
		text-decoration: none;
		overflow: hidden;

		& .toolbar_icon{
			top: 0;
		    background-color: #d0d6d9;
			line-height: $item_size;
		}

		& .toolbar_text{
			top: $item_size;
			padding-top: 12px;
			background-color: #98a1a6;
			line-height: 1.2;
			font-size: 12px;
		}
	}

	& .toolbar_item_code{
			width: 160px;
			height: 160px;
			position: absolute;
			bottom: 0;
			right: $item_size;
			background: url(../../img/toolbar.png) -5px -13px;
			@include opacity(0);
			@include scale(0.01);
			@include boxShadow(0 6px 10px 0 #333);
			@include transform-origin(100% 95%);
			@include transition(transform .5s linear,opacity .5s linear);
	}

	&:hover{
		& .toolbar_icon{
			top: -$item_size;
		}

		& .toolbar_text{
			top: 0;
		}

		& .toolbar_item_code{
				@include opacity(1);
				@include scale(1);
			}
	}
}

#top{
	display: none;
}



@font-face {
	font-family: 'icomoon';
	src:url('../icon/fonts/icomoon.eot?wl5xo8');
	src:url('../icon/fonts/icomoon.eot?#iefixwl5xo8') format('embedded-opentype'),
		url('../icon/fonts/icomoon.ttf?wl5xo8') format('truetype'),
		url('../icon/fonts/icomoon.woff?wl5xo8') format('woff'),
		url('../icon/fonts/icomoon.svg?wl5xo8#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-wechat:before {
	content: "\e604";
}
.icon-mobile:before {
	content: "\e600";
}
.icon-point-up:before {
	content: "\e601";
}
.icon-bubble:before {
	content: "\e602";
}
